<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<c:set var="ctx" value="${pageContext.request.contextPath}" scope="application"/>
<c:set var="rctx" value="${resourceRoot}" scope="application"/>
<script type="text/javascript" src="${rctx}/jquery.min.js"></script>
<title>Login</title>
<script type="text/javascript">
$(document).ready(function() {
	$("#ssss").bind("click", function(){
		sendJsonssss();
	});
	$("#dddd").bind("click", function(){
		sendJsondddd();
	});
});

function sendJsonssss() { 
	var req = {
			"methodName":"login", "req":{
				"username": $('input[name="username"]').val(),
				"password": $('input[name="password"]').val(),
				"realname": $('input[name="realname"]').val()
				}
		  };
	
	alert(JSON.stringify(req));
	// 一定要用json.stringify!!!!! 才是真正的json
	// 如果前台对象和后台对象对不上，springmvc的jsonconverter就无法解析，甚至抛出400 bad request错误
	$.ajax({
		  type: "POST",
		  url: "${ctx}/test/json/controller/login",
		  //url: "http://localhost:8898/kscj/json/login/login.htm",
		  dataType: "json",
		  contentType: "application/json; charset=utf-8",
		  data: JSON.stringify(req),
		  success: function (data, textStatus) {
		  },
		  traditional: true
		});
}
function sendJsondddd() { 
	var req = {
			"username": $('input[name="username"]').val(),
			"password": $('input[name="password"]').val(),
			"realname": $('input[name="realname"]').val()
		  };
	// 一定要用json.stringify!!!!! 才是真正的json
	$.ajax({
		  type: "POST",
		  url: "${ctx}/JsonServlet",
		  dataType: 'json',
		  contentType: "application/json; charset=utf-8",
		  data: JSON.stringify(req),
		  success: function (data, textStatus) {
		  },
		  traditional: true
		});
} 
</script>
</head>
<body>
	<h1>Login</h1>	
	<form action="/">
		<table>
			<tr>
				<td>用户名：</td>
				<td><input type="text" name="username"/></td>
			</tr>
			<tr>
				<td>密码:</td>
				<td><input type="password" name="password"/></td>
			</tr>
			<tr>
				<td>真实姓名:</td>
				<td><input type="text" name="realname"/></td>
			</tr>
			<tr>
			</tr>			
		</table>
	</form>
	<button id="ssss">提交到JsonController</button><button id="dddd">提交到JsonServlet</button>
</body>
</html>